<template>
  <div class="restaurant-bar-dashboard">
    <!-- 头部区域 -->
    <CurrentDate title="On-site Restaurants & Bars" />

    <!-- 一级折叠面板 - 控制全部内容 -->
    <CollapsibleSection
      title="1.Sarāi"
      :tooltip-title="'Official Accounts'"
      @toggle-collapse="handleCollapse"
      :panelIndex="0"
      :isExpanded="panelStates[0]"
    />

    <!-- 全部内容区域 (受1.Sarāi控制) -->
    <template v-if="panelStates[0]">
      <!-- 1.1 Platform Overview 标题 -->
      <CollapsibleSection
        title="1.1 Platform Overview"
        :tooltip-title="'Official Accounts'"
        @toggle-collapse="handleCollapse"
        :panelIndex="1"
        :isExpanded="panelStates[1]"
      />

      <!-- ChartGroup (仅受1.1控制) -->
      <template v-if="panelStates[1]">
        <div class="chart-group">
          <ChartGroup />
        </div>
      </template>

      <!-- 1.2 Performance Analytics 标题 -->
      <CollapsibleSection
        title="1.2 Performance Analytics"
        :tooltip-title="'Official Accounts'"
        @toggle-collapse="handleCollapse"
        :panelIndex="2"
        :isExpanded="panelStates[2]"
      />

      <!-- 剩余内容 (仅受1.2控制) -->
      <template v-if="panelStates[2]">
        <ServiceCirPie class="chart-spacing" />
        <div class="progress-group">
          <ProgressNegMen />
          <ProgressPosMen />
        </div>
        <PerformanceHig />
        <Upload />
      </template>
    </template>
  </div>
</template>

<script>
import CurrentDate from "@components/common/CurrentDate.vue";
import CollapsibleSection from "@components/common/CollapsibleSection.vue";
import HotelBarsPesone from "./components/platformOverview/HotelBarsPesone.vue";
import ResortBarCard from "./components/platformOverview/ResortBarCard.vue";
import SocialMediaPlatform from "./components/echarts/CirPie/SocialMediaPlatform.vue";
import ServiceCirPie from "@views/hotelRestaurantsBars/components/echarts/CirPie/ServiceCirPie.vue";
import ProgressNegMen from "@views/hotelRestaurantsBars/components/echarts/Progress/ProgressNegMen.vue";
import ProgressPosMen from "@views/hotelRestaurantsBars/components/echarts/Progress/ProgressPosMen.vue";
import PerformanceHig from "@views/hotelRestaurantsBars/components/PerformanceHig.vue";
import Upload from "@views/hotelRestaurantsBars/components/platformOverview/Upload.vue";
import ChartGroup from "@views/hotelRestaurantsBars/components/platformOverview/ChartGroup.vue";

import { Reviews } from "@/api/information.js";

export default {
  name: "RestaurantBarDashboard",
  components: {
    CurrentDate,
    CollapsibleSection,
    HotelBarsPesone,
    ResortBarCard,
    SocialMediaPlatform,
    ServiceCirPie,
    ProgressNegMen,
    ProgressPosMen,
    PerformanceHig,
    Upload,
    ChartGroup,
  },
  data() {
    return {
      reviews: [],
      sources: [],
      panelStates: [true, true, true], // 默认全部展开
    };
  },
  methods: {
    handleCollapse(panelData) {
      this.$set(this.panelStates, panelData.panelIndex, panelData.isExpanded);
    },
    async getReviews() {
      try {
        const res = await Reviews();
        if (res && Array.isArray(res)) {
          this.reviews = res;
          this.sources = [...new Set(res.map((item) => item.source))];
        }
      } catch (error) {
        console.error("获取评论失败:", error);
      }
    },
  },
  mounted() {
    this.getReviews();
  },
};
</script>

<style lang="scss" scoped>
/* 保持原有样式完全不变 */
.restaurant-bar-dashboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;

  .chart-group {
    display: flex;
    width: 100%;
    gap: 20px;

    .large-chart {
      flex: 1;
      min-width: 0;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      height: auto;

      &:nth-child(2) {
        background: #f1f8fe;
      }
      &:nth-child(3) {
        background: #f0f4ff;
      }
      &:nth-child(4) {
        background: #ffffff;
      }

      > div {
        padding: 16px;
      }
    }
  }

  .chart-spacing {
    margin-top: 20px;
  }

  .progress-group {
    display: flex;
    margin-top: 30px;
    > * {
      flex: 1;
      &:not(:first-child) {
        margin-left: 12px;
      }
    }
  }
}
</style>
